'use client'

import { useState } from 'react'

import PlanCard from '@/components/dashboard/PlanCard'
import Sidebar from '@/components/dashboard/Sidebar'
import UploadCard from '@/components/dashboard/workspace/UploadCard'
import GetStartedCard from '@/components/dashboard/workspace/GetStartedCard'
import ReportsDashboard from '@/components/dashboard/workspace/ReportsDashboard'
import Plan from '@/components/dashboard/plan/Plan'
import PaymentMethod from '@/components/dashboard/plan/PaymentMethod'
import BillingHistory from '@/components/dashboard/plan/BillingHistory'
import Account from '@/components/dashboard/account/Account'
import Profile from '@/components/dashboard/account/Profile'
import NavBar from '@/components/sample/NavBar'
import Footer from '@/components/dashboard/Footer'

export default function ReportPage() {
  const [activeTab, setActiveTab] = useState<'workspace' | 'billing' | 'account' | 'reports'>('workspace')

  return (
    <div className="relative w-full h-screen overflow-y-auto overflow-x-hidden">
      <NavBar />

      <div className="min-h-screen text-gray-100 flex justify-center p-8">
        {/* 限制最大宽度 */}
        <div className="w-full max-w-[1080px] flex flex-col md:flex-row gap-8">
          {/* 左侧菜单 */}
          <aside className="w-full md:w-72 flex-shrink-0 space-y-8">
            <PlanCard />
            <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
          </aside>

          {/* 右侧主内容 */}
          <div className="flex-1 min-w-0 space-y-8">
            {activeTab === 'workspace' && (
              <>
                <UploadCard />
                <div className="mt-[16px]"></div>
                <GetStartedCard />
                <div className="mt-[16px]"></div>
                <ReportsDashboard />
              </>
            )}

            {activeTab === 'billing' && (
              <div className="w-full">
                <Plan />
                <div className="mt-[16px]"></div>
                <PaymentMethod />
                <div className="mt-[16px]"></div>
                <BillingHistory />
              </div>
            )}

            {activeTab === 'account' && (
              <div className="w-full">
                <Account />
                <div className="mt-[16px]"></div>
                <Profile />
              </div>
            )}
          </div>
        </div>
      </div>

      <Footer />
    </div>
  )
}
